import { ArticleDetail } from '@/services/creationCenter/typing';
import { convertTimeZone } from '@/utils/operateTime';
import { Card, Flex, Tooltip, Typography } from 'antd';
import { useState } from 'react';
import DisplayData from '../components/DisplayData';
import styles from './index.module.scss';

const { Title, Paragraph, Text } = Typography;

const DiaryItem: React.FC<{ diaryInfo: ArticleDetail }> = ({ diaryInfo }) => {
  const [expanded, setExpanded] = useState(false);

  return (
    <div className={styles.diary_box}>
      <Flex align="center" justify="center" className={styles.img_box}>
        {diaryInfo.cover_img_url ? (
          <img src={diaryInfo.cover_img_url} />
        ) : (
          <Title level={3}>暂无封面</Title>
        )}
      </Flex>
      <Card>
        <Title level={4}>{diaryInfo.title}</Title>
        <div className={styles.paragraph}>
          <Paragraph
            ellipsis={{
              rows: 3,
              expandable: 'collapsible',
              expanded,
              onExpand: (_, info) => setExpanded(info.expanded),
            }}
          >
            {diaryInfo.synopsis}
          </Paragraph>
        </div>
        <div className={styles.footer}>
          <DisplayData
            words_num={diaryInfo.words_num}
            thumbs_up={diaryInfo.thumbs_up}
            comment_num={diaryInfo.comment_num}
            page_view={diaryInfo.page_view}
          />

          <div className={styles.right}>
            <Tooltip title="更新时间">
              <Text type="secondary">
                {convertTimeZone(diaryInfo.update_time)}
              </Text>
            </Tooltip>
          </div>
        </div>
      </Card>
    </div>
  );
};

export default DiaryItem;
